/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="content">
    </mt-actionsheet>
    <div class="box">
      <div class="top">
        <NavBar :title="viewInfo.appName">
          <router-link slot="left" to="/home" style="width: 100%;text-align: center;">
            <i class="iconfont icon-arrow-left" style="font-size: 20px;" ></i>
          </router-link>
        </NavBar>
      </div>
      <div class="search">
        <!-- <search-bar placeholder="搜索" :onSearch="onSearch" ></search-bar> -->
        <mt-search
          v-model="searchKey"
          cancel-text="取消"
          placeholder="搜索">
        </mt-search>
      </div>
      <ul class="middle"  id="content">
        <!--mescroll滚动区域的基本结构-->
			    <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
            <div v-for="(item,index) in dataList" :key="index">
              <List v-bind:item="item" :index="index" :appname="viewName"></List>
            </div>
			    </mescroll-vue>
      </ul>
      <div class="bottom">
        <BottomNav :handlerNav="handlerType" :navData="viewInfo.menu ? viewInfo.menu.items : []" :selectedId="type" ></BottomNav>
      </div>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import NavBar from "../../components/NavBar/NavBar.vue";
import BottomNav from "./BottomNav";
import List from "./List";
import MescrollVue from "mescroll.js/mescroll.vue";
import { reqTaskList } from "../../api";
import { Actionsheet, Search } from "mint-ui";

// 自定义的一级菜单
let initMenu = [{ id: 10, text: "待办事项" }, { id: 20, text: "已办事项" }];

export default {
  data() {
    return {
      dataList: [], // 列表数据
      title: "", //页面名称
      viewInfo: {}, //页面初始化信息
      searchKey: "",
      typesMenu: [],
      viewName: "", //当前视图的名字,要通过appname传给后台
      type: "1", //任务类型 10: 待办事项; 20: 已办事项;
      mescroll: null, // mescroll实例对象
      mescrollDown: {
        callback: this.downCallback,
        auto: true,
        isBoth: false,
      },
      //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10 // 每页数据的数量
        },
        auto: false,
        htmlNodata: '<p class="upwarp-nodata">-- 没有更多内容了 --</p>',
        // toTop: {
        //   //回到顶部按钮
        //   warpClass : "mescroll-backtop",
        //   src: "../../../static/img/back-top.png", //图片路径,默认null,支持网络图
        //   offset: 1000 //列表滚动1000px才显示回到顶部按钮
        // },
        callback: this.upCallback,
        empty: {
          // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
          warpId: "content", // 父布局的id;
          icon: "../../../static/img/no-data.png", // 图标,支持网络图
          tip: "暂无相关数据~", // 提示
          lazyLoad: {
            use: false // 是否开启懒加载,默认false
          }
        }
      }
    };
  },
  // watch
  watch: {
    searchKey: _.debounce(function(data) {
      this.mescroll.triggerDownScroll();
    }, 500)
  },
  // 进入路由时,恢复列表状态
  beforeRouteEnter(to, from, next) {
    // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
    next(vm => {
      if (
        from.path === "/details" &&
        vm.mescroll &&
        vm.dataList &&
        vm.dataList.length > 0
      ) {
        console.log("不刷新list页面");
        // 滚动到之前列表的位置 (注意:路由使用keep-alive才生效)
        if (vm.mescroll.lastScrollTop) {
          vm.mescroll.setScrollTop(vm.mescroll.lastScrollTop);
        }
      } else if (from.path === "/home") {
        console.log("刷新list页面");
        //当从除详情页的其他页面来的时候手动刷新数据
        vm.viewName = vm.$route.query.appname;
        vm.mescroll.triggerDownScroll();
        // vm.initView();
      } else {
        vm.viewName = vm.$route.query.appname;
        vm.mescroll.triggerDownScroll();
        console.log("直接刷新");
      }
    });
  },
  // 离开路由时,记录列表状态
  beforeRouteLeave(to, from, next) {
    // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
    if (this.mescroll) {
      this.mescroll.lastBounce = this.mescroll.optUp.isBounce; // 记录当前是否禁止ios回弹
      this.mescroll.setBounce(true); // 允许bounce
      this.mescroll.lastScrollTop = this.mescroll.getScrollTop(); // 记录当前滚动条的位置
    }
    next();
  },
  methods: {
    // initView 初始化或者刷新页面
    async initView() {
      const result = await reqTaskList({
        nowpage: 1,
        pagesize: 10,
        appname: this.viewName,
        keyword: this.searchKey
      });
      if (result.code === 1) {
        this.viewInfo = result.data;
        this.dataList = result.data.items;
        this.typesMenu = result.data.menu.itesm;
      }
    },
    //切换类型状态
    handlerType(data) {
      console.log("切换状态", data);
      if (this.type == data) return; //如果是一样的话就不再更新
      // //更改状态
      // this.mescroll.triggerDownScroll();
      this.type = data;
      // debugger;
    },
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    async downCallback(mescroll) {
      console.log("触发下拉刷新!")
      const result = await reqTaskList({
        nowpage: 1,
        pagesize: 10,
        appname: this.viewName,
        keyword: this.searchKey
      });
      console.log('刷新的结果',result )
      if (result.code === 1) {
        const arr = result.data.items;
        this.viewInfo = result.data;
        this.dataList = arr;
        // 数据渲染成功后,隐藏下拉刷新的状态
        this.$nextTick(() => {
          mescroll.endSuccess(arr.length);
        });
      } else {
        this.$nextTick(() => {
          mescroll.endErr();
          // mescroll.endSuccess(0);
        });
      }
    },
    async upCallback(page, mescroll) {
      console.log("触发上拉加载!");
      const result = await reqTaskList({
        nowpage: page.num,
        pagesize: page.size,
        appname: this.viewName,
        keyword: this.searchKey
      });
      if (result.code === 1) {
        const arr = result.data.items;
        this.dataList = this.dataList.concat(arr);
        // 数据渲染成功后,隐藏下拉刷新的状态
        this.$nextTick(() => {
          mescroll.endSuccess(arr.length);
        });
      } else {
        this.$nextTick(() => {
          mescroll.endErr();
          // mescroll.endSuccess(0);
        });
      }
    }
  },
  mounted: function() {},

  components: {
    NavBar,
    List,
    MescrollVue,
    "mt-actionsheet": Actionsheet,
    "mt-search": Search,
    BottomNav
  }
};
</script>

<style lang='less' scoped>
@import "../../util/themt.less";

.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .search {
    flex: 0 0 40px;
    background: #fff;
    border-bottom: 1px solid @border-base;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
  }
  .top {
    display: flex;
    flex: 0 0 46px;
  }
  .middle {
    flex: 1;
    .list:first-child {
      margin-top: 10px;
    }
  }
  .bottom {
    height: 46px;
    li:first-child {
    }
    .active {
      color: @primary !important;
      // border-top: 2px solid @primary;
    }
    .line {
      webkit-transition: top 0.3s cubic-bezier(0.35, 0, 0.25, 1),
        left 0.3s cubic-bezier(0.35, 0, 0.25, 1),
        color 0.3s cubic-bezier(0.35, 0, 0.25, 1),
        width 0.3s cubic-bezier(0.35, 0, 0.25, 1);
      transition: top 0.3s cubic-bezier(0.35, 0, 0.25, 1),
        left 0.3s cubic-bezier(0.35, 0, 0.25, 1),
        color 0.3s cubic-bezier(0.35, 0, 0.25, 1),
        width 0.3s cubic-bezier(0.35, 0, 0.25, 1);
      will-change: top, left, width, color;
      position: absolute;
      border: 1px solid @primary;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      box-sizing: border-box;
    }
    li {
      background: #fff;
      float: left;
      box-sizing: border-box;
      border-top: 1px solid @grayLine;
      font-weight: 500;
      line-height: 46px;
      text-align: center;
      position: relative;
      color: #9c9c9c;
      font-size: 14px;
      ul {
        position: absolute;
        bottom: 47px;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        li {
          width: 100%;
        }
      }
    }
  }
  /*通过fixed固定mescroll的高度*/
  .mescroll {
    position: fixed;
    top: 86px;
    bottom: 46px;
    height: auto;
  }
}
</style>
